<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>列表组</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <p>基本列表组</p>
                                    <p>
                                    <ul class="list-group">
                                        <li class="list-group-item">待处理信息</li>
                                        <li class="list-group-item">已处理信息</li>
                                        <li class="list-group-item">处理成功信息</li>
                                        <li class="list-group-item">处理失败信息</li>
                                    </ul>
                                    </p>
                                </div>
                                <div class="col-md-6">
                                    <p>徽章组合</p>
                                    <p>
                                    <ul class="list-group">
                                        <li class="list-group-item">待处理信息<span class="badge badge-primary">10</span>
                                        </li>
                                        <li class="list-group-item">已处理信息<span class="badge badge-info">10</span></li>
                                        <li class="list-group-item">处理成功信息<span class="badge badge-success">10</span>
                                        </li>
                                        <li class="list-group-item">处理失败信息</li>
                                    </ul>
                                    </p>
                                </div>
                                <div class="col-md-6">
                                    <p>底线列表组</p>
                                    <p>
                                    <ul class="list-group bottom-line">
                                        <li class="list-group-item">待处理信息</li>
                                        <li class="list-group-item">已处理信息</li>
                                        <li class="list-group-item">处理成功信息</li>
                                        <li class="list-group-item">处理失败信息</li>
                                    </ul>
                                    </p>
                                </div>
                                <div class="col-md-6">
                                    <p>底线虚线列表组</p>
                                    <p>
                                    <ul class="list-group bottom-line-dashed">
                                        <li class="list-group-item">待处理信息<span class="badge badge-primary">10</span>
                                        </li>
                                        <li class="list-group-item">已处理信息<span class="badge badge-info">10</span></li>
                                        <li class="list-group-item">处理成功信息<span class="badge badge-success">10</span>
                                        </li>
                                        <li class="list-group-item">处理失败信息</li>
                                    </ul>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="panel">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <p>链接</p>
                                    <p>
                                    <div class="list-group">
                                        <a href="#" class="list-group-item active">
                                            待处理信息<span class="badge badge-primary">10</span>
                                        </a>
                                        <a href="#" class="list-group-item">已处理信息<span
                                                class="badge badge-primary">10</span></a>
                                        <a href="#" class="list-group-item">处理成功信息</a>
                                        <a href="#" class="list-group-item">处理失败信息</a>
                                    </div>
                                    </p>
                                </div>
                                <div class="col-md-6">
                                    <p>按钮</p>
                                    <p>
                                    <div class="list-group">
                                        <button type="button" class="list-group-item">待处理信息<span
                                                class="badge badge-primary">10</span></button>
                                        <button type="button" class="list-group-item active">已处理信息<span
                                                class="badge badge-warning">10</span></button>
                                        <button type="button" class="list-group-item">处理成功信息</button>
                                        <button type="button" class="list-group-item">处理失败信息</button>
                                    </div>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <p>禁用条目</p>
                                    <p>
                                    <ul class="list-group">
                                        <li class="list-group-item">待处理信息<span class="badge badge-primary">10</span>
                                        </li>
                                        <li class="list-group-item disabled">已处理信息<span
                                                class="badge badge-info">10</span></li>
                                        <li class="list-group-item">处理成功信息<span class="badge badge-warning">10</span>
                                        </li>
                                        <li class="list-group-item">处理失败信息<span class="badge badge-danger">10</span>
                                        </li>
                                    </ul>
                                    </p>
                                </div>
                                <div class="col-md-6">
                                    <p>背景色</p>
                                    <p>
                                    <ul class="list-group">
                                        <li class="list-group-item list-group-item-primary">待处理信息<span
                                                class="badge badge-primary">10</span></li>
                                        <li class="list-group-item list-group-item-info disabled">已处理信息<span
                                                class="badge badge-info">10</span></li>
                                        <li class="list-group-item list-group-item-warning">处理成功信息<span
                                                class="badge badge-warning">10</span></li>
                                        <li class="list-group-item list-group-item-danger">处理失败信息<span
                                                class="badge badge-danger">10</span></li>
                                    </ul>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <p>复杂列表组</p>
                                    <p>
                                    <div class="list-group">
                                        <a href="#" class="list-group-item active">
                                            <h4 class="list-group-item-heading">山居秋暝</h4>
                                            <p class="list-group-item-text">空山新雨后，天气晚来秋。明月松间照，清泉石上流。竹喧归浣女，莲动下渔舟。随意春芳歇，王孙自可留。</p>
                                        </a>
                                        <a href="#" class="list-group-item">
                                            <h4 class="list-group-item-heading">望岳</h4>
                                            <p class="list-group-item-text">岱宗夫如何？齐鲁青未了。造化钟神秀，阴阳割昏晓。荡胸生曾云，决眦入归鸟。会当凌绝顶，一览众山小。</p>
                                        </a>
                                        <a href="#" class="list-group-item">
                                            <h4 class="list-group-item-heading">送杜少府之任蜀州</h4>
                                            <p class="list-group-item-text">城阙辅三秦，风烟望五津。与君离别意，同是宦游人。海内存知己，天涯若比邻。无为在歧路，儿女共沾巾。
                                            </p>
                                        </a>
                                        <a href="#" class="list-group-item">
                                            <h4 class="list-group-item-heading">竹石</h4>
                                            <p class="list-group-item-text">咬定青山不放松，立根原在破岩中。千磨万击还坚劲，任尔东西南北风。</p>
                                        </a>

                                    </div>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
</body>

</html>